import * as React from 'react';
import classNames from 'classnames';

import { BaseProps, BaseHelper } from '../base';

// 传入组件的属性规约
export interface SpaceWraperProps extends BaseProps {
  direction?: String;
  childStyle?: React.CSSProperties;
}

// TypeScript的无状态组件的写法
const SpaceWraper: React.SFC<SpaceWraperProps> = (props: SpaceWraperProps) => {

  const {
    childStyle,
    children,
    disabled,
    className,
    direction = 'row'
  } = props;

  let _style = BaseHelper.concatStyle(props);
  const prefixClass = BaseHelper.getPrefixCls('space-wraper');

  if (props.height) {
    _style = {
      ..._style,
      lineHeight: props.height + 'px'
    }
  }

  const wrapCls = classNames(
    {
      [`${prefixClass}`]: true,
      [`disabled`]: disabled,
      [`direction_${direction}`]: true,
    },
    className
  );

  return (
    <div
      className={wrapCls}
      style={_style}
    >
      {
        // children
        children.map((child) => {
          console.log(child,"=======children===========")
          return React.cloneElement(child, {
            disabled: disabled,
            style: childStyle
          });
        })
      }
    </div>
  );

}

export default SpaceWraper;
